ul#nav
	li.current(data-rel="#general_options") {{General}}

	// Compiler Navigation
	each compiler in compilers
		li(data-rel="#" + compiler.name + "_options")= compiler.display
	li(data-rel="#advanced_options") {{Advanced}}
	li(data-rel="#help_options") {{Help}}
	li(data-rel="#about_options") {{About}}

div#content
	// General options
	div#general_options
		h2 {{General}}
		p.selectitem.mb5 {{Language:}} 
			select#locales
				each language in appConfig.languages
					option(value=language.code, name=language.code, selected=language.code === appConfig.locales)= language.name
		label
			input#minimizeToTray(type="checkbox", checked=appConfig.minimizeToTray)
			span {{Minimize To Tray}}
		br
		label
			input#minimizeOnStartup(type="checkbox", checked=appConfig.minimizeOnStartup)
			span {{Minimize On Startup}}

	// mixin checkbox
	mixin arg_checkbox(option, compilerName, type)
		label
			input.compile_option(type="checkbox", id= compilerName + "_" + option.name, data-rel=compilerName, data-name=option.name, checked=option.value, data-type=type)
			span= __(option.display)
		br

	// mixin text
	mixin arg_text(option, compilerName, type)
		label
			span= __(option.display) + ":"
			input.compile_option(type="text", id= compilerName + "_" + option.name, data-rel=compilerName, data-name=option.name, value=option.value, placeholder=__(option.placeholder), data-depend=option.depend, data-type=type)
		br

	// mixin droplist
	mixin arg_droplist(option, compilerName, type)
		p.mb5= __(option.display) + ': '
			select.compile_option(id= compilerName + "_" + option.name, data-rel=compilerName, data-name=option.name, data-type=type)
				each item in option.items
					option(value=item.value, selected=option.value === item.value)= __(item.text)

	// mixin description
	mixin arg_description(text)
		p.mb5= __(text)

	mixin options_group(title, compiler, group)
		if compiler[group].length
			h3= title
			div.optionbox
				each option in compiler[group]
					case option.type
						when "checkbox"
							mixin arg_checkbox(option, compiler.name, group)

						when "text"
							mixin arg_text(option, compiler.name, group)

						when "droplist"
							mixin arg_droplist(option, compiler.name, group)

						when "description"
							mixin arg_description(option.display)

	// compiler options
	each compiler in compilers
		div.hide(id=compiler.name + "_options")
			h2= compiler.display

			mixin options_group("{{Default Options}}", compiler, "options")
			mixin options_group("{{Advanced Settings}}", compiler, "advanced")

			if compiler.libraries && compiler.libraries.length
				h3 {{Libraries Version}}
				div.optionbox
					each lib in compiler.libraries
						| #{lib}
						br

			if compiler.maintainer
				h3 {{Maintainers}}
				div.optionbox
					a.externalLink(href=compiler.maintainer.web)= compiler.maintainer.name
					if compiler.maintainer.email
						|  &lt;#{compiler.maintainer.email}&gt;
					br
					| {{Project Website:}} 
					a.externalLink(href=compiler.maintainer.project)= compiler.maintainer.project
					br
					if compiler.contributors && compiler.contributors.length
						| {{Contributors:}} 
						span.contributors
							each people in compiler.contributors
								a.externalLink(href=people.web)= people.name

			if compiler.isExtension
				button.uninstall(data-rel=compiler.name) {{Uninstall This Extension}}

	// advanced options
	div#advanced_options.hide
		h2 {{Advanced}}
		p.optionbox
			label
				input.compile_option(type="checkbox", id="global_useCustomRuby", data-name="useCustomRuby", data-rel="global", checked=appConfig.useCustomRuby)
				span {{Use Custom Ruby}}
			br
			label
				span {{Use the Ruby executable at this path}}:
				input.compile_option(type="text", id="global_rubyCommandPath", placeholder="{{Default}}: ruby", data-name="rubyCommandPath", data-depend="useCustomRuby", data-rel="global", value=appConfig.rubyCommandPath)
			br
			label
				span {{Ignores}}:
				input#ignores(type="text", data-name="ignores", placeholder="{{e.g}}: *.min, min, test", value=appConfig.ignores.join())
			br
			label
				span {{Include Paths}}:
				input#includePaths(type="text", data-name="includePaths", placeholder="/path/to/frameworks", value=appConfig.includePaths.join())
		p.mt10
			button#openExtsFolder {{Browse Extensions}}

	// help options
	div#help_options.hide
		h2 {{Help}}
		p.mt10
			| {{Docs:}} 
			a.externalLink(href=appPackage.maintainers.docs)= appPackage.maintainers.docs
			br
			| {{FAQ:}} 
			a.externalLink(href=appPackage.maintainers.faq)= appPackage.maintainers.faq
			br
			| {{Bug Report:}} 
			a.externalLink(href=appPackage.maintainers.issues)= appPackage.maintainers.issues

	// about options
	div#about_options.hide
		h2 {{About}}
		div#about
			| Copyright (c) 2013 
			a.externalLink(href=appPackage.maintainers.web)= appPackage.maintainers.name
			br
			
			| {{Project Website:}} 
			a#link_project.externalLink(href=appPackage.maintainers.project)= appPackage.maintainers.project
			br
			
			div#upgradetips
				p.update
					| {{new version available}}
					a#link_download.externalLink(href="#") {{Download Now}}
					| .
				p.noupdate {{This is the lastest version.}}

			| {{[@settings.html]Version:}} v
			span#koalaVersion= appPackage.version
			button#checkupgrade {{Check Upgrade}}
			span#upgradeloading {{Checking...}}
			br
			
			| {{Contributors:}} 
			span.contributors
				each people in appPackage.contributors
					a.externalLink(href=people.web)= people.name
			br

			if translator.name !== 'Official'
				| {{Translator:}}
				a.externalLink(href=translator.web)= translator.name
